<script setup lang="ts">
const props = defineProps({
    bccolor: {
        type: String,
        default: 'rgba(71, 85, 233, 1)',
    },
    icon: {
        type: String,
        default: 'daishenhedingdan',
    },
    title: {
        type: String,
        default: '待结算金额',
    },
    iconcolor: {
        type: String,
        default: '#fff',
    },
    titlecolor: {
        type: String,
        default: '#fff',
    },
    data: {
        type: String,
        default: '0.00',
    },
})
</script>

<template>
    <view class="content__center--box box" :style="{ background: props.bccolor }">
        <view class="box__top"><u-icon :name="props.icon" custom-prefix="icon" class="iconfont" :color="props.iconcolor" size="80"></u-icon></view>
        <view class="box__price">{{ props.title }}</view>
        <view class="box__total" :style="{ color: props.titlecolor }">¥{{ props.data }}</view>
    </view>
</template>

<style lang="scss" scoped>
@include b(box) {
    height: 100%;
    background-color: rgba(71, 85, 233, 1);
    width: 330rpx;
    padding: 40rpx 52rpx 56rpx 32rpx;
    border-radius: 26rpx;
    @include e(top) {
        margin-bottom: 40rpx;
    }
    @include e(price) {
        margin-bottom: 32rpx;
        color: rgba(212, 216, 255, 1);
        font-size: 24rpx;
    }
    @include e(total) {
        color: rgba(255, 255, 255, 1);
        font-size: 48rpx;
        font-weight: 700;
    }
}
</style>
